<template>
  <div class="main-container">
    <Index_Head></Index_Head>
    <div class="idea">
      <div :class="chooseAct">
        <div class="choose" @click="arrow">
          <div class="choice">
            <div class="place">{{ choice }}</div>
            <ul :class="pullDown">
              <li v-for="item in list" :key="item.id"
                  @click="valueChange(item.id)" ref="liInner">{{ item.value }}
              </li>
            </ul>
          </div>
          <span :class="arrowClass">
      <img src="../assets/arrowTop.png" alt="" width="100%" height="100%">
    </span>
        </div>
      </div>
      <div :class="firstAct">
        <div class="first">
          <ul>
            <li>{{listValue.one}}</li>
            <li>{{listValue.two}}</li>
            <li>{{listValue.three}}</li>
          </ul>
        </div>
      </div>
      <div :class="secondAct">
        <div class="second">
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
      <div class="share">
        <div :class="back" @click="backAct">点击收回</div>
        <div :class="shareComment" @click="shareMove">
          <div class="innerText">
            <ul ref="innerBox" class="innerBox">
              <li v-for="item in shareInner" :key="item">{{ item }}</li>
            </ul>
          </div>
          <div class="typeIn">
            <input ref="input" class="input" type="text" @keydown="sbmit">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line camelcase
import Index_Head from '../components/Index/IndexHead'

export default {
  name: 'Main',
  components: { Index_Head },
  data () {
    return {
      arrowClass: 'arrow',
      choice: '请选择你的idea',
      pullDown: 'pullDown',
      chooseAct: 'chooseP',
      firstAct: 'firstP',
      secondAct: 'secondP',
      shareComment: 'shareComment',
      back: 'back',
      shareInner: [],
      liInnerText: '',
      list: [
        {
          id: 0,
          value: 'Web网页'
        },
        {
          id: 1,
          value: '衣服'
        },
        {
          id: 2,
          value: '创业'
        },
        {
          id: 3,
          value: '飞机'
        },
        {
          id: 4,
          value: '抢劫'
        },
        {
          id: 5,
          value: '火箭'
        },
        {
          id: 6,
          value: '直播'
        },
        {
          id: 7,
          value: '赚钱'
        },
        {
          id: 8,
          value: '犯法'
        }
      ],
      listLead: [
        {
          id: 1,
          value: {
            one: 'html',
            two: 'css',
            three: 'javascript'
          }
        }
      ],
      listValue: {
        one: '',
        two: '',
        three: ''
      }
    }
  },
  methods: {
    arrow () {
      if (this.arrowClass === 'arrow') {
        this.arrowClass = 'arrowClick'
        this.pullDown = 'pullDownClicked'
      } else {
        this.arrowClass = 'arrow'
        this.pullDown = 'pullDown'
      }
    },
    valueChange (e) {
      const liInner = this.$refs.liInner
      this.choice = liInner[e].innerHTML
      this.liInnerText = liInner[e].innerHTML
      this.listValue.one = this.listLead[e].value.one
      this.listValue.two = this.listLead[e].value.two
      this.listValue.three = this.listLead[e].value.three
    },
    shareMove () {
      this.shareComment = 'shareCommentClicked'
      this.back = 'backClick'
    },
    backAct () {
      this.shareComment = 'shareComment'
      this.back = 'back'
    },
    sbmit () {
      const e = event.keyCode
      if (e === 13) {
        this.shareInner.push(this.$refs.input.value)
        this.$refs.input.value = null
      }
    }
  },
  watch: {
    choice (val) {
      if (val !== '请选择你的idea') {
        this.chooseAct = 'chooseEd'
        this.firstAct = 'firstEd'
        this.secondAct = 'secondEd'
      }
    },
    liInnerText (val) {
    }
  }
}
</script>

<style scoped lang="less">

@keyframes slidedown {
  0% {
    transform: scale(1, 0);
  }
  25% {
    transform: scale(1, 1.25);
  }
  50% {
    transform: scale(1, 0.75);
  }
  75% {
    transform: scale(1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

.idea {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  height: 85vh;
  position: relative;
}

.choose {
  height: 50px;
  width: 200px;
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  background-color: #fff;
  opacity: .9;
  //margin: 100px auto;
  cursor: pointer;
  transition: all .2s;
  position: relative;

  &:hover {
    background-color: #f3f3f3;
  }

  &:active {
    background-color: #e0e0e0;
  }

  .choice {
    height: 100%;
    width: 100%;
    font-size: 18px;
    line-height: 50px;

    .place {
      padding: 0 5px;
      font-size: 18px;
    }

    .pullDown {
      width: 100%;
      height: 0;
      background-color: #fff;
      opacity: .9;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-margin: 100px;
      transition: all .75s;

      .place {
        padding: 0 3px;
        transition: all .2s;
        opacity: .9;
        border-radius: 4px;

        &:hover {
          background-color: #f3f3f3;
        }

        &:active {
          background-color: #e0e0e0;
        }
      }

      li {
        padding: 0 3px;
        background-color: #fff;
        opacity: .9;
        transition: background-color .2s;
        scroll-snap-align: start;

        &:hover {
          background-color: #ecd74d;
        }
      }

      &:last-child li {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }
    }

    .pullDownClicked {
      width: 100%;
      height: 200px;
      background-color: #fff;
      opacity: .9;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-margin: 10px;
      transition: all .75s;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, .5);

      .place {
        padding: 0 3px;
        transition: all .2s;
        opacity: .9;
        border-radius: 4px;

        &:hover {
          background-color: #f3f3f3;
        }

        &:active {
          background-color: #e0e0e0;
        }
      }

      li {
        padding: 0 3px;
        background-color: #fff;
        opacity: .9;
        transition: background-color .2s;
        scroll-snap-align: start;

        &:hover {
          background-color: #ecd74d;
        }
      }

      &:last-child li {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }
    }
  }

  .arrow {
    height: 25px;
    width: 25px;
    display: block;
    position: absolute;
    right: 10px;
    top: 15px;
    transition: transform .4s;
    transform: rotateZ(180deg) rotateY(180deg);
  }

  .arrowClick {
    height: 25px;
    width: 25px;
    display: block;
    position: absolute;
    right: 10px;
    top: 15px;
    transition: all .4s;
  }
}

.chooseP {
  position: absolute;
  top: 30%;
  left: 43%;
  transition: all 2s;
  z-index: 3;
}

.chooseEd {
  position: absolute;
  top: 45%;
  left: 15%;
  transition: all 2s;
  z-index: 3;
}

.first {
  width: 200px;
  height: 75vh;
  //background-color: #fff;
  z-index: 2;

  ul {
    height: 96%;
    width: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    li {
      display: block;
      height: 50px;
      width: 200px;
      background-color: #fff;
      border-radius: 4px;
      font-size: 22px;
      line-height: 50px;
      text-align: center;
    }
  }
}

.firstP {
  position: absolute;
  top: 10%;
  left: 37%;
  opacity: 0;
  transition: all 3s;
}

.firstEd {
  position: absolute;
  top: 6%;
  left: 50%;
  opacity: .9;
  transition: all 3s;
}

.second {
  width: 200px;
  height: 75vh;
  background-color: transparent;
  z-index: 2;

  ul {
    height: 96%;
    width: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    li {
      display: block;
      height: 50px;
      width: 200px;
      background-color: transparent;
      border-radius: 4px;
    }
  }
}

.secondP {
  position: absolute;
  top: 10%;
  right: 15%;
  opacity: 0;
  transition: all 5s;
}

.secondEd {
  position: absolute;
  top: 6%;
  right: 15%;
  opacity: .9;
  transition: all 5s;
}

.shareComment {
  height: 500px;
  width: 300px;
  background-color: #fff;
  border-radius: 8px;
  position: absolute;
  right: -18%;
  transition: all .5s;

  &:hover + .back {
    transform: translateX(-20%);
  }

  &:hover {
    transform: translateX(-10%);
  }
}

.shareCommentClicked {
  height: 500px;
  width: 300px;
  background-color: #fff;
  border-radius: 0 8px 8px 8px;
  position: absolute;
  right: 0;
  transition: all .75s;
}

.back {
  height: 100px;
  width: 25px;
  position: absolute;
  right: 2%;
  background-color: #fff;
  border-radius: 4px 0 4px 4px;
  cursor: pointer;
  transition: all .5s;
  opacity: 0;
  text-align: center;
  line-height: 22px;
  box-sizing: border-box;
  padding: 5px 0;
}

.backClick {
  height: 100px;
  width: 25px;
  position: absolute;
  right: 19.5%;
  background-color: #fff;
  border-radius: 4px 0 4px 4px;
  cursor: pointer;
  transition: all .75s;
  opacity: 1;
  text-align: center;
  line-height: 22px;
  box-sizing: border-box;
  padding: 5px 0;

  &:hover {
    background-color: #e1e1e1;
  }
}

.innerText {
  height: 90%;
  width: 90%;
  background:linear-gradient(to top right, #1b6ec9, #e87575) ;
  margin-left: 9%;

  .innerBox {
    overflow-y: scroll;
    height: 100%;

    li {
      display: -webkit-box;
      min-height: 40px;
      max-height: 90px;
      width: 98%;
      background-color: #fff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      transition: all .5s;
      padding: 10px 5px;
      box-sizing: border-box;
      font-family: 宋体;
      font-weight: bolder;
      margin: 5px 1%;
    }
  }
}

.typeIn {
  width: 90%;
  height: 8%;

  .input {
    width: 99%;
    height: 100%;
    margin-left: 10%;
    border-radius: 4px;
    outline: none;
    border: 2px solid #ef6e6e;
    font-size: 18px;
  }
}
</style>
